<template>
  <view class="investigate-content myform">
    <uni-forms
      :value="formData"
      ref="form"
      validate-trigger="bind"
      err-show-type="undertext"
    >
      <!-- 基本信息 -->
      <view class="form-cont">
        <view class="max-title" @click="changeDisplay"
          >基本信息<img
            :class="!basicShow ? 'rotate' : ''"
            src="https://szgd-dev.tgovcloud.com/public/images/arr-down.png"
        /></view>
        <view class="basic-info" v-show="basicShow">
          <!-- 顶部个人信息 -->
          <view class="investigate-info">
            <view v-for="item in investigateInfo" :key="item.name">
              <view class="name" >{{ item.name }}</view>
              <view class="value" v-if="item.prop=='cardType'"  >{{ personInfo[item.prop] | cardTypeFilter }}</view>
              <view class="value" v-else-if="item.prop=='gender'">{{personInfo[item.prop] | genderFilter}}</view>
              <view class="value" v-else>{{ personInfo[item.prop] || '-' }}</view>
            </view>
          </view>
        </view>
        <view class="divi-bar"></view>
        <view
          class="medical-history"
          v-for="(formItem, k) in formInfo"
          :key="k"
        >
          <view class="main-tit">
            <view class="sub-title">{{ formItem.title }}</view>
            <view class="wp">
              
            </view>
          </view>
          <view
            v-for="(item, key) in formItem.children"
            class="flex-box"
            :key="key"
          >
            <view>
              <text v-if="item.index">{{ item.index }}.</text>
              {{ item.label }}:
            </view>

            <view v-if="item.type == 'radio'">
              {{code2name(item.radioValue, item.radioArray)}}
            </view>

            <view class="cb-style-1"   v-if="item.type == 'checkbox'">
              <text class="check-box-item"  v-for="val in item.checkboxValue" :key="val" >{{code2name(val, item.checkboxArray)}} </text>
            </view>

            <view v-if="item.hasInputFrame && item.isShowInput   " class="wrapper-input"  >
                <view>{{item.inputValue}}</view>
            </view>

            <view v-if="item.type == 'textarea'" class="my-input-style">
                <view>{{item.inputValue}}</view>
            </view>

            <view class="date-style"  v-if="item.type==='date'"  >
              {{ `${item.dateValue} ${item.timeValue}` }}
            </view>

            <view class="divi-btm"></view>
            
          </view>
          <view class="divi-bar"></view>

        </view>
      </view>
      
      <view class="pageBtn">
        <view class="modify-btn btn" @click="modifyBtn" >修改</view>
        <view class="confirm-btn btn" @click="confirmBtn">确认</view>
      </view>
    </uni-forms>
  </view>
</template>

<script>
import { getData,   } from "@/api/index";
import { cardTypes, genderArray } from "@/data";
import { investigateInfo } from "./formConfig";

function cpyFunc(obj, f) {
  try {
    return JSON.parse(JSON.stringify(obj));
  } catch (error) {
    console.log("cuole====", error);
  }
}
export default {
  data() {
    return {
      formInfo: [],
      name: "",
      formData: {
        otherDiseases: ""
      },
      // 个人信息
      investigateInfo: cpyFunc(investigateInfo),
      basicShow: true,
      personInfo: {},
    };
  },
  onLoad(e) {
    this.formInfo=uni.getStorageSync('psychologicalInspectionData')
    this.personInfo=uni.getStorageSync('personInfo')||{}
  },

   filters: {
    cardTypeFilter(value) {
      const typeObj = cardTypes.find(obj => obj.value === value);
      return typeObj ? typeObj.label : '';
    },
    
    genderFilter(value){
      const typeObj = genderArray.find(obj => obj.value == value);
      return typeObj ? typeObj.label : '-';
    },
  },


  methods: {

    code2name(code, arr){
      let str=''
      arr.forEach(ele => {
        if(ele.value==code){
          str = ele.text;
        }
      })
      return str;
    },
    
    changeDisplay() {
      this.basicShow = !this.basicShow;
    },
 
    modifyBtn(){
      uni.navigateBack();
    },

    packaging(obj){
      this.formInfo.forEach(item1 => {
        let children = item1.children;
        children.forEach(item2 => {
          


          let valueProp = item2.type + 'Value';
          let value = item2[valueProp];
          if(obj.hasOwnProperty(item2.prop)){
            // 处理日期
            if(item2.type=='date'){
              obj[item2.prop]=`${item2.dateValue} ${item2.timeValue}:00`
            }else {
              obj[item2.prop]=Array.isArray(value) ? value.join(',') : value;
            }
          }
          if(obj.hasOwnProperty(item2.inputProp)){
            obj[item2.inputProp]=item2.inputValue;
          }
        })
      })
      return obj
    },

    confirmBtn(){
      const userInfo = uni.getStorageSync('personalInfo');
      const personInfo = uni.getStorageSync('personInfo');

      let data = {
        "creapers": userInfo.name,
        // "creapersid": 0,
        // "creatime": "",
        "gycs": "",
        "gycsqt": "",
        "inspectInfoId": "",
        "inspectTime": "",
        "isValid": 0,
        "modipers": "",
        "modipersid": 0,
        "moditime": "",
        "personId": personInfo.personId,
        "qxqk": "",
        "qxqkqt": "",
        "remark": "",
        "smqk": "",
        "smqkqt": "",
        "xzqkqt": "",
        "yxjz": "",
        "yxjzqt": "",
        "yyqk": "",
        "yyqkqt": "",
        "zsqx": "",
        "zsxw": ""
      }

      this.packaging(data);

      console.log('组装后的参数===', data);

      getData('inspectSave', 'post', data).then(res => {
        uni.navigateTo({
          url: `/packageAlpha/pages/psychologicalInspection/success`
        })
      })
    },

  }
};
</script>

<style lang="scss">
.investigate-content {
  display: flex;
  flex-direction: column;

  .jizheng-form {
    display: flex;
    justify-content: space-between;
  }

  .form-cont {
    background: #fff;
  }

  .title {
    font-size: 40rpx;
    color: #000000;
    font-weight: bold;
  }

  .sub-title {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #000000;
  }

  .max-title {
    font-size: 40rpx;
    color: #000000;
    font-weight: 600;
    height: 98rpx;
    line-height: 98rpx;
    background: #fff;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 0 32rpx;
    position: relative;
    display: flex;
    justify-content: space-between;

    & ~ .basic-info {
      margin-top: 0;
    }

    img {
      width: 26rpx;
      height: 15rpx;
      position: absolute;
      right: 38rpx;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.5s;

      &.rotate {
        transform: rotate(-90deg);
        transition: all 0.5s;
      }
    }

    .check-no{
      color: #53adf3;
      font-size: 30rpx;
      display: inline-block;
    }

    .check-no {
      margin-right: 76rpx;
    }

     
  }

  .main-tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 98rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #E5E5E5;
    padding: 0 32rpx;
    
    .check-no{
      height: 60rpx;
      font-size: 30rpx;
      text-align: center;
      font-family: PingFang SC;
      font-weight: 500;
      background: #2C9AF1;
      border-radius: 5px;
      width: 210rpx;
      line-height: 60rpx;
      color: #fff;
    }
  }
  .divi-btm {
    width: 100%;
    background-color: #e5e5e5;
    height: 1rpx;
  }
  .investigate-info {
    font-size: 30rpx;
    background: #fff;
    .name {
      font-size: 30rpx;
      font-family: PingFang SC;
      color: #999999;
    }
    .value {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 500;

      color: #666666;
    }
  }
  .divi-bar {
    background-color: #F9F9F9;
    width: 100vw;
    height: 30rpx;
  }
  .investigate-info > view {
    display: flex;
    justify-content: space-between;
    // padding: 18rpx 0;
    height: 96rpx;
    line-height: 96rpx;

    // border-bottom: 1rpx solid #e5e5e5;
  }

  .investigate-info view view:first-child {
    color: #999999;
  }

  .investigate-info view view:last-child {
    color: #000000;
    font-size: 32rpx;
  }

  .basic-info {
    font-size: 30rpx;
    background: #fff;
    padding: 0 32rpx 30rpx;
    // margin: 30rpx 0;
    overflow: hidden;

  }

  .medical-history {
    background: #fff;
    // padding: 0 32rpx;

    .uni-data-checklist {
      margin: 20rpx 0;
    }

    .required {
      display: inline-block;
      color: red;
      margin-left: 10rpx;
    }
  }

  .lettle-title {
    font-size: 40rpx;
    font-weight: 600;
    line-height: 98rpx;
    height: 98rpx;
  }

  .input-style {
    font-size: 24rpx;
    margin-top: 20px;
    border-bottom: 1rpx solid #e4e4e4;
  }

  .flex-box {
    font-size: 26rpx;
    display: flex;
    justify-content: space-between;
    color: #333333;
    flex-wrap: wrap;
    padding: 0 32rpx;
    &:nth-last-child(2){
      .divi-btm {
        display: none;
      }
    }
    & > view {
      line-height: 80rpx;
    }

    text {
      font-size: 26rpx;
    }

    .my-input-style {
      height: auto;
      width: 100%;
      line-height: 40rpx;
      .content-clear-icon {
        height: 22rpx;
        line-height: 22rpx;
      }
    }
    
  }

  .picker-control {
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    color: #333333;
    margin-bottom: 10rpx;

    &-title {
      font-weight: 500;
      font-size: 26rpx;

      &-picker {
        margin-top: 20rpx;
        padding: 20rpx 20rpx;
        text-align: center;
        border: 1px solid #f2f2f2;
        border-radius: 8rpx;

        &-date {
          border-left: 0;
          border-right: 0;
          border-top: 0;
          border-bottom: 1px solid #f2f2f2;

          .uni-input {
            line-height: 80rpx;
          }
        }

        .uni-input {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 26rpx;
        }
      }
    }

    .picker-content-text {
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
      border-radius: 6px;
      position: relative;
      padding-left: 40rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding-right: 48rpx;
      .picker-content-img {
        width: 26rpx;
        height: 15rpx;
        background: url("https://szgd-dev.tgovcloud.com/public/images/arr-down.png")
          no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .btn {
    width: 686rpx;
    height: 94rpx;
    background: #2c9af1;
    border-radius: 16rpx;
  }

  .small-title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    padding: 40rpx 0 0 0;
  }

  .investigate-group {
    .uni-group {
      margin-top: 0 !important;
    }

    .uni-group__content {
      padding: 0;
    }
  }

  .vaccination-wrapper {
    .label {
      font-size: 30rpx;
      font-weight: bold;
      color: #000000;
      padding: 40rpx 0 0 0;
      margin-bottom: 20rpx;
    }

    .flex-box {
      width: 100%;
    }

    .vaccination-content {
      width: 100%;

      & > view {
        margin-bottom: 30rpx;
      }

      .vaccination-title {
        height: 60rpx;
      }
    }

    .vaccination-select {
      border-bottom: 1px solid #e5e5e5;
    }
  }

  .picker-content-text {
    height: 90rpx;
    line-height: 90rpx;
  }

  .epidemiology-his {
    /deep/ .uni-forms-item__inner {
      margin: 0;
    }

    padding-bottom: 20rpx;
  }

  .mood-form {
    padding-bottom: 20rpx;

    /deep/ .uni-forms-item__inner:last-child {
      margin: 0;
    }
  }
  .my-popup-box {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 0 40rpx;
    max-width: 600rpx;
    .my-popup-title {
      color: #000;
      padding: 40rpx 30rpx 20rpx;
      font-weight: bold;
      font-size: 34rpx;
    }
    .my-popup-content {
      color: #666;
      padding: 20rpx 30rpx 30rpx;
      font-size: 32rpx;
      .icon {
        vertical-align: middle;
        margin-right: 16rpx;
      }
      .text {
        vertical-align: middle;
      }
    }
    .my-popup-handler {
      display: flex;
      border-top: 1px solid #f5f5f5;
      font-weight: 500;
    }
    .my-popup-handler__item {
      width: 50%;
      box-sizing: border-box;
      color: #000;
      font-size: 36rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      &.confirm {
        border-left: 1px solid #f5f5f5;
        color: #2c9af1;
      }
    }
    .text-warn {
      color: #df6434;
    }
  }
  .wrapper-input {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
  }
  .cb-style-1 {
    width: 100%;
    /deep/ .uni-data-checklist .checklist-group .checklist-box  {
      min-width: 28%;
      margin-right: 10rpx;
      box-sizing: border-box;
    }
  }
  .pageBtn {
    background-color: #F9F9F9;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn {
      width: 328rpx;
      height: 94rpx;
      background: #FFFFFF;
      border: 1px solid #F79672;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modify-btn {
      border: 1px solid #F79672;
      color: #F79672;
    }
    .confirm-btn {
      background: #2C9AF1;
      border: 1px solid #2C9AF1;
      color: #fff;
    }
  }
  .check-box-item {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #2C9AF1;
    margin-right: 30rpx;
  }
}
</style>
